<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 
    样式继承，为一个元素设置的样式同时也会应用到它的后代元素上

    继承发生在祖先和后代之间的

    继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
    这样只要设置一次即可让所有的元素都具有该样式

    注意：并不是所有的样式都会被继承，比如，背景相关的，布局相关的
    布局和框模型属性： margin、padding、width、height 等通常不会被子元素继承。
    定位属性： position、top、left 等通常不会被子元素继承。
    背景属性： background、background-color 通常不会被子元素继承。
    */
    body {
      font-size: 20px;
    }

    p {
      color: red;
    }
  </style>
</head>

<body>
  <p>y1865437821 <span>278561587</span></p>
</body>

</html>
<!-- 

可继承的属性包括：
字体系列属性：
font-family：规定元素的字体系列。
font-size：设置字体的尺寸。
font-weight：设置字体的粗细。
font-style：设置字体风格，如斜体。
其他字体相关属性，如line-height（行高）也通常被视为可继承的。

文本系列属性：
text-align：文本水平对齐方式（尽管有些情况下可能不会直观表现为继承，但它确实是可继承的）。
text-indent：文本缩进。
text-transform：控制文本大小写。
letter-spacing：字母间距。
word-spacing：单词间距。
text-decoration的某些方面（如颜色）在某些浏览器中可能表现为继承，但通常认为text-decoration本身是不继承的，这里存在细节差异。
color：文本颜色。

元素可见性和光标属性：
visibility：元素可见性。
cursor：鼠标指针的样式。

其他可继承属性：
quotes：引号样式。
某些列表属性，如list-style-type、list-style-position等（尽管列表的某些方面可能不会直观继承，但相关属性在技术上是可继承的）。

不可继承的属性包括：
盒模型属性：
width、height：元素的宽度和高度。
margin：元素的外边距。
border：元素的边框。
padding：元素的内边距。

定位属性：
position：元素的定位方式（如相对定位、绝对定位等）。
top、right、bottom、left：定位偏移量。
z-index：堆叠顺序。

显示属性：
display：规定元素应该生成的框的类型。

背景属性：
background-color：背景颜色。
其他背景相关属性，如background-image、background-position等，通常也是不可继承的。

其他不可继承属性：
float、clear：浮动和清除浮动。
vertical-align：垂直对齐方式（尽管在某些情况下可能表现为类似继承的效果，但它实际上是不可继承的）。
大多数布局和排版相关的属性，如grid、flex容器的属性等。

-->